import * as React from 'react';
import {observer} from 'mobx-react'
import ECharts from "echarts-for-react";
import {optionConfig} from './optionConfig'

interface IProps {
    dataX?: string[]
    dataYB?: number[]
    dataYL?: number[]
}

@observer
class Map extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    public chartRef: any;// ECharts的实例

    public componentDidUpdate(prevProps: Readonly<IProps>, prevState: Readonly<{}>, snapshot?: any) {
        const {dataYL, dataYB, dataX} = this.props
        this.chartRef &&
        this.chartRef.getEchartsInstance().setOption(optionConfig(dataX, dataYL, dataYB))
    }

    public componentWillUnmount() {
        this.chartRef.getEchartsInstance().clear()
    }

    public render() {
        return (
            <ECharts
                ref={ref => {
                    this.chartRef = ref
                }}
                option={{}}
                style={{
                    height: '100%',
                    width: '100%',
                    top: '0%',
                    position: 'relative',
                }}
                notMerge
                lazyUpdate
            />
        );
    }
}

export default Map;
